CSS :has() ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಅನ್ವೇಷಿಸಿ, ಇದು ಪೇರೆಂಟ್ ಸೆಲೆಕ್ಷನ್‌ಗೆ ಒಂದು ಗೇಮ್-ಚೇಂಜರ್. ನಿಮ್ಮ CSS ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ಕ್ರಾಂತಿಗೊಳಿಸಲು ಪ್ರಾಯೋಗಿಕ ಅನ್ವಯಗಳು, ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ, ಮತ್ತು ಸುಧಾರಿತ ತಂತ್ರಗಳನ್ನು ಕಲಿಯಿರಿ.
CSS :has() ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು: ಪೇರೆಂಟ್ ಸೆಲೆಕ್ಷನ್ ಶಕ್ತಿಯನ್ನು ಅನಾವರಣಗೊಳಿಸುವುದು
ವರ್ಷಗಳಿಂದ, CSS ಡೆವಲಪರ್‌ಗಳು ತಮ್ಮ ಮಕ್ಕಳ (children) ಆಧಾರದ ಮೇಲೆ ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಸರಳ ಮತ್ತು ಪರಿಣಾಮಕಾರಿ ಮಾರ್ಗಕ್ಕಾಗಿ ಹಂಬಲಿಸುತ್ತಿದ್ದರು. ಈಗ ಆ ಕಾಯುವಿಕೆ ಮುಗಿದಿದೆ! :has() ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್ ಅಂತಿಮವಾಗಿ ಇಲ್ಲಿದೆ, ಮತ್ತು ಇದು ನಾವು CSS ಬರೆಯುವ ವಿಧಾನವನ್ನು ಕ್ರಾಂತಿಗೊಳಿಸುತ್ತಿದೆ. ಈ ಶಕ್ತಿಯುತ ಸೆಲೆಕ್ಟರ್, ಒಂದು ನಿರ್ದಿಷ್ಟ ಚೈಲ್ಡ್ ಎಲಿಮೆಂಟ್ ಹೊಂದಿದ್ದರೆ ಅದರ ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಟಾರ್ಗೆಟ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, ಇದು ಡೈನಾಮಿಕ್ ಮತ್ತು ರೆಸ್ಪಾನ್ಸಿವ್ ಸ್ಟೈಲಿಂಗ್‌ಗಾಗಿ ಸಾಧ್ಯತೆಗಳ ಜಗತ್ತನ್ನು ತೆರೆಯುತ್ತದೆ.
:has() ಸೆಲೆಕ್ಟರ್ ಎಂದರೇನು?
:has() ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್ ಒಂದು CSS ರಿಲೇಶನಲ್ ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್ ಆಗಿದ್ದು, ಇದು ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ ಸೆಲೆಕ್ಟರ್ ಲಿಸ್ಟ್ ಅನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ. ಸೆಲೆಕ್ಟರ್ ಲಿಸ್ಟ್‌ನಲ್ಲಿರುವ ಯಾವುದೇ ಸೆಲೆಕ್ಟರ್, ಎಲಿಮೆಂಟ್‌ನ ವಂಶಸ್ಥರ (descendants) ಪೈಕಿ ಕನಿಷ್ಠ ಒಂದು ಎಲಿಮೆಂಟ್‌ಗೆ ಹೊಂದಾಣಿಕೆಯಾದರೆ, ಅದು ಆ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತದೆ. ಸರಳವಾಗಿ ಹೇಳುವುದಾದರೆ, ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್ ಒಂದು ನಿರ್ದಿಷ್ಟ ಚೈಲ್ಡ್ ಅನ್ನು ಹೊಂದಿದೆಯೇ ಎಂದು ಇದು ಪರಿಶೀಲಿಸುತ್ತದೆ, ಮತ್ತು ಹೊಂದಿದ್ದರೆ, ಪೇರೆಂಟ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡಲಾಗುತ್ತದೆ.
ಮೂಲ ಸಿಂಟ್ಯಾಕ್ಸ್ ಹೀಗಿದೆ:
parent:has(child) { /* CSS ನಿಯಮಗಳು */ }
ಇದು ಕನಿಷ್ಠ ಒಂದು child ಎಲಿಮೆಂಟ್ ಅನ್ನು ಹೊಂದಿದ್ದರೆ ಮಾತ್ರ parent ಎಲಿಮೆಂಟ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತದೆ.
:has() ಏಕೆ ಅಷ್ಟು ಮುಖ್ಯ?
ಸಾಂಪ್ರದಾಯಿಕವಾಗಿ, CSS ತನ್ನ ಮಕ್ಕಳ ಆಧಾರದ ಮೇಲೆ ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡುವ ಸಾಮರ್ಥ್ಯದಲ್ಲಿ ಸೀಮಿತವಾಗಿತ್ತು. ಈ ಮಿತಿಯು ಡೈನಾಮಿಕ್ ಸ್ಟೈಲಿಂಗ್ ಸಾಧಿಸಲು ಸಂಕೀರ್ಣವಾದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪರಿಹಾರಗಳು ಅಥವಾ ಪರ್ಯಾಯ ಮಾರ್ಗಗಳನ್ನು ಬಳಸುವಂತೆ ಮಾಡುತ್ತಿತ್ತು. :has() ಸೆಲೆಕ್ಟರ್ ಈ ತೊಡಕಿನ ವಿಧಾನಗಳ ಅಗತ್ಯವನ್ನು ನಿವಾರಿಸುತ್ತದೆ, ಇದರಿಂದಾಗಿ ಸ್ವಚ್ಛ, ನಿರ್ವಹಿಸಬಲ್ಲ ಮತ್ತು ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯ CSS ಕೋಡ್ ಬರೆಯಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ.
:has() ಏಕೆ ಗೇಮ್-ಚೇಂಜರ್ ಎಂಬುದಕ್ಕೆ ಕೆಲವು ಕಾರಣಗಳು ಇಲ್ಲಿವೆ:
- ಸರಳೀಕೃತ ಸ್ಟೈಲಿಂಗ್: ಹಿಂದೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಗತ್ಯವಿದ್ದ ಸಂಕೀರ್ಣ ಸ್ಟೈಲಿಂಗ್ ನಿಯಮಗಳನ್ನು ಈಗ ಶುದ್ಧ CSS ಮೂಲಕವೇ ಸಾಧಿಸಬಹುದು.
- ಸುಧಾರಿತ ನಿರ್ವಹಣೆ: ಸ್ವಚ್ಛ ಮತ್ತು ಸಂಕ್ಷಿಪ್ತ CSS ಕೋಡ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು, ಡೀಬಗ್ ಮಾಡುವುದು ಮತ್ತು ನಿರ್ವಹಿಸುವುದು ಸುಲಭ.
- ವರ್ಧಿತ ಕಾರ್ಯಕ್ಷಮತೆ: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್-ಆಧಾರಿತ ಪರಿಹಾರಗಳಿಗೆ ಹೋಲಿಸಿದರೆ, ನೇಟಿವ್ CSS ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಬಳಸುವುದು ಸಾಮಾನ್ಯವಾಗಿ ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನೀಡುತ್ತದೆ.
- ಹೆಚ್ಚಿನ ನಮ್ಯತೆ:
:has()ಸೆಲೆಕ್ಟರ್ ಡೈನಾಮಿಕ್ ಮತ್ತು ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ಹೆಚ್ಚಿನ ನಮ್ಯತೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ.
:has() ಸೆಲೆಕ್ಟರ್‌ನ ಮೂಲ ಉದಾಹರಣೆಗಳು
:has() ಸೆಲೆಕ್ಟರ್‌ನ ಶಕ್ತಿಯನ್ನು ವಿವರಿಸಲು ಕೆಲವು ಸರಳ ಉದಾಹರಣೆಗಳೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸೋಣ.
ಉದಾಹರಣೆ 1: ಚಿತ್ರದ ಉಪಸ್ಥಿತಿಯ ಆಧಾರದ ಮೇಲೆ ಪೇರೆಂಟ್ Div ಅನ್ನು ಸ್ಟೈಲ್ ಮಾಡುವುದು
ಒಂದು <div> ಎಲಿಮೆಂಟ್ <img> ಎಲಿಮೆಂಟ್ ಹೊಂದಿದ್ದರೆ ಮಾತ್ರ ಅದಕ್ಕೆ ಬಾರ್ಡರ್ ಸೇರಿಸಲು ನೀವು ಬಯಸುತ್ತೀರಿ ಎಂದು ಭಾವಿಸೋಣ:
div:has(img) {
border: 2px solid blue;
}
ಈ CSS ನಿಯಮವು ಕನಿಷ್ಠ ಒಂದು <img> ಎಲಿಮೆಂಟ್ ಹೊಂದಿರುವ ಯಾವುದೇ <div> ಗೆ ನೀಲಿ ಬಾರ್ಡರ್ ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ.
ಉದಾಹರಣೆ 2: Span ಇರುವಿಕೆಯ ಆಧಾರದ ಮೇಲೆ ಲಿಸ್ಟ್ ಐಟಂ ಅನ್ನು ಸ್ಟೈಲ್ ಮಾಡುವುದು
ನಿಮ್ಮ ಬಳಿ ಐಟಂಗಳ ಪಟ್ಟಿ ಇದೆ ಮತ್ತು ಅದರಲ್ಲಿ ನಿರ್ದಿಷ್ಟ ಕ್ಲಾಸ್ ಹೊಂದಿರುವ <span> ಎಲಿಮೆಂಟ್ ಇದ್ದರೆ ಆ ಲಿಸ್ಟ್ ಐಟಂ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡಲು ನೀವು ಬಯಸುತ್ತೀರಿ ಎಂದುಕೊಳ್ಳಿ:
li:has(span.highlight) {
background-color: yellow;
}
ಈ CSS ನಿಯಮವು "highlight" ಕ್ಲಾಸ್ ಹೊಂದಿರುವ <span> ಹೊಂದಿರುವ ಯಾವುದೇ <li> ಯ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಹಳದಿ ಬಣ್ಣಕ್ಕೆ ಬದಲಾಯಿಸುತ್ತದೆ.
ಉದಾಹರಣೆ 3: ಇನ್‌ಪುಟ್ ಸಿಂಧುತ್ವದ ಆಧಾರದ ಮೇಲೆ ಫಾರ್ಮ್ ಲೇಬಲ್ ಅನ್ನು ಸ್ಟೈಲ್ ಮಾಡುವುದು
ನೀವು :has() ಅನ್ನು ಬಳಸಿ ಅದರ ಸಂಬಂಧಿತ ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್ ಮಾನ್ಯವಾಗಿದೆಯೇ ಅಥವಾ ಅಮಾನ್ಯವಾಗಿದೆಯೇ ಎಂಬುದರ ಆಧಾರದ ಮೇಲೆ ಫಾರ್ಮ್ ಲೇಬಲ್ ಅನ್ನು ಸ್ಟೈಲ್ ಮಾಡಬಹುದು (:invalid ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್ ಜೊತೆಗೆ):
label:has(+ input:invalid) {
color: red;
font-weight: bold;
}
ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ನ ತಕ್ಷಣದ ನಂತರದ ಲೇಬಲ್ ಅಮಾನ್ಯವಾಗಿದ್ದರೆ, ಇದು ಲೇಬಲ್ ಅನ್ನು ಕೆಂಪು ಮತ್ತು ದಪ್ಪ ಮಾಡುತ್ತದೆ.
:has() ಸೆಲೆಕ್ಟರ್‌ನ ಸುಧಾರಿತ ಬಳಕೆಗಳು
:has() ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಇತರ CSS ಸೆಲೆಕ್ಟರ್‌ಗಳು ಮತ್ತು ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್‌ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಿದಾಗ ಅದು ಇನ್ನಷ್ಟು ಶಕ್ತಿಯುತವಾಗುತ್ತದೆ. ಕೆಲವು ಸುಧಾರಿತ ಬಳಕೆಯ ಪ್ರಕರಣಗಳು ಇಲ್ಲಿವೆ:
ಉದಾಹರಣೆ 4: ಖಾಲಿ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಟಾರ್ಗೆಟ್ ಮಾಡುವುದು
ನಿರ್ದಿಷ್ಟ ಚೈಲ್ಡ್ *ಇಲ್ಲದ* ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಟಾರ್ಗೆಟ್ ಮಾಡಲು ನೀವು :not() ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್ ಅನ್ನು :has() ಜೊತೆಗೆ ಬಳಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ಚಿತ್ರಗಳನ್ನು *ಹೊಂದಿರದ* div ಗಳನ್ನು ಸ್ಟೈಲ್ ಮಾಡಲು:
div:not(:has(img)) {
background-color: #f0f0f0;
}
ಇದು ಯಾವುದೇ <img> ಎಲಿಮೆಂಟ್ ಹೊಂದಿರದ <div> ಗೆ ತಿಳಿ ಬೂದು ಬಣ್ಣದ ಹಿನ್ನೆಲೆಯನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ.
ಉದಾಹರಣೆ 5: ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸುವುದು
ಕಂಟೇನರ್‌ನ ವಿಷಯದ ಆಧಾರದ ಮೇಲೆ ಡೈನಾಮಿಕ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು :has() ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಬಳಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ಗ್ರಿಡ್ ಸೆಲ್‌ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟ ರೀತಿಯ ಎಲಿಮೆಂಟ್ ಇರುವಿಕೆಯ ಆಧಾರದ ಮೇಲೆ ನೀವು ಗ್ರಿಡ್‌ನ ಲೇಔಟ್ ಅನ್ನು ಬದಲಾಯಿಸಬಹುದು.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.grid-item:has(img) {
grid-column: span 2;
}
ಇದು ಗ್ರಿಡ್ ಐಟಂ ಚಿತ್ರವನ್ನು ಹೊಂದಿದ್ದರೆ, ಅದನ್ನು ಎರಡು ಕಾಲಮ್‌ಗಳಷ್ಟು ವಿಸ್ತರಿಸುತ್ತದೆ.
ಉದಾಹರಣೆ 6: ಡೈನಾಮಿಕ್ ಫಾರ್ಮ್ ಸ್ಟೈಲಿಂಗ್
ಫಾರ್ಮ್ ಎಲಿಮೆಂಟ್‌ಗಳ ಸ್ಥಿತಿಯ ಆಧಾರದ ಮೇಲೆ (ಉದಾಹರಣೆಗೆ, ಅವು ಫೋಕಸ್ ಆಗಿವೆಯೇ, ತುಂಬಿವೆಯೇ, ಅಥವಾ ಮಾನ್ಯವಾಗಿವೆಯೇ) ಅವುಗಳನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ಸ್ಟೈಲ್ ಮಾಡಲು ನೀವು :has() ಅನ್ನು ಬಳಸಬಹುದು.
.form-group:has(input:focus) {
box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
}
.form-group:has(input:valid) {
border-color: green;
}
.form-group:has(input:invalid) {
border-color: red;
}
ಇನ್‌ಪುಟ್ ಫೋಕಸ್ ಮಾಡಿದಾಗ ನೀಲಿ ಬಾಕ್ಸ್ ಶಾಡೋ, ಇನ್‌ಪುಟ್ ಮಾನ್ಯವಾಗಿದ್ದರೆ ಹಸಿರು ಬಾರ್ಡರ್ ಮತ್ತು ಇನ್‌ಪುಟ್ ಅಮಾನ್ಯವಾಗಿದ್ದರೆ ಕೆಂಪು ಬಾರ್ಡರ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ.
ಉದಾಹರಣೆ 7: ಮಕ್ಕಳ ಸಂಖ್ಯೆಯ ಆಧಾರದ ಮೇಲೆ ಸ್ಟೈಲಿಂಗ್
:has() ನೇರವಾಗಿ ಮಕ್ಕಳ ಸಂಖ್ಯೆಯನ್ನು ಎಣಿಸದಿದ್ದರೂ, ಇದೇ ರೀತಿಯ ಪರಿಣಾಮಗಳನ್ನು ಸಾಧಿಸಲು ನೀವು ಅದನ್ನು ಇತರ ಸೆಲೆಕ್ಟರ್‌ಗಳು ಮತ್ತು CSS ಪ್ರಾಪರ್ಟಿಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ನಿರ್ದಿಷ್ಟ ಪ್ರಕಾರದ ಒಂದೇ ಮಗು ಹೊಂದಿದ್ದರೆ ಪೇರೆಂಟ್ ಅನ್ನು ಸ್ಟೈಲ್ ಮಾಡಲು ನೀವು :only-child ಬಳಸಬಹುದು.
div:has(> p:only-child) {
background-color: lightgreen;
}
ಇದು ಕೇವಲ ಒಂದು <p> ಎಲಿಮೆಂಟ್ ಅನ್ನು ತನ್ನ ನೇರ ಮಗುವಾಗಿ ಹೊಂದಿರುವ <div> ಗೆ ತಿಳಿ ಹಸಿರು ಹಿನ್ನೆಲೆಯನ್ನು ಸ್ಟೈಲ್ ಮಾಡುತ್ತದೆ.
ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ ಮತ್ತು ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳು
2023 ರ ಅಂತ್ಯದ ವೇಳೆಗೆ, :has() ಸೆಲೆಕ್ಟರ್ Chrome, Firefox, Safari, ಮತ್ತು Edge ಸೇರಿದಂತೆ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಅತ್ಯುತ್ತಮ ಬೆಂಬಲವನ್ನು ಹೊಂದಿದೆ. ಆದಾಗ್ಯೂ, ಪ್ರೊಡಕ್ಷನ್‌ನಲ್ಲಿ ಅದನ್ನು ಬಳಸುವ ಮೊದಲು Can I use ನಲ್ಲಿ ಹೊಂದಾಣಿಕೆಯನ್ನು ಪರಿಶೀಲಿಸುವುದು ಬಹಳ ಮುಖ್ಯ, ವಿಶೇಷವಾಗಿ ನೀವು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸಬೇಕಾದರೆ.
ಹೊಂದಾಣಿಕೆಯ ಪರಿಗಣನೆಗಳ ವಿಭಜನೆ ಇಲ್ಲಿದೆ:
- ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳು: Chrome, Firefox, Safari, ಮತ್ತು Edge ನ ಇತ್ತೀಚಿನ ಆವೃತ್ತಿಗಳಲ್ಲಿ ಅತ್ಯುತ್ತಮ ಬೆಂಬಲ.
- ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳು: ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ (ಉದಾ., ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್‌ಪ್ಲೋರರ್) ಯಾವುದೇ ಬೆಂಬಲವಿಲ್ಲ.
ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಒದಗಿಸುವುದು
ನೀವು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸಬೇಕಾದರೆ, ನೀವು ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಒದಗಿಸಬೇಕಾಗುತ್ತದೆ. ಕೆಲವು ತಂತ್ರಗಳು ಇಲ್ಲಿವೆ:
- ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್:
:has()ಗೆ ಬ್ರೌಸರ್‌ನ ಬೆಂಬಲವನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಮತ್ತು ಅಗತ್ಯವಿದ್ದರೆ ಪರ್ಯಾಯ ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ಅನ್ವಯಿಸಿ. - ಫೀಚರ್ ಕ್ವೆರಿಗಳು: ಬ್ರೌಸರ್ ಬೆಂಬಲದ ಆಧಾರದ ಮೇಲೆ ವಿಭಿನ್ನ ಶೈಲಿಗಳನ್ನು ಒದಗಿಸಲು CSS ಫೀಚರ್ ಕ್ವೆರಿಗಳನ್ನು (
@supports) ಬಳಸಿ. - ಪ್ರೊಗ್ರೆಸ್ಸಿವ್ ಎನ್‌ಹಾನ್ಸ್‌ಮೆಂಟ್: ಎಲ್ಲಾ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಮೂಲಭೂತ, ಕ್ರಿಯಾತ್ಮಕ ವಿನ್ಯಾಸದೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಿ, ಮತ್ತು ನಂತರ
:has()ಅನ್ನು ಬೆಂಬಲಿಸುವ ಬ್ರೌಸರ್‌ಗಳಿಗಾಗಿ ವಿನ್ಯಾಸವನ್ನು ಹಂತಹಂತವಾಗಿ ವರ್ಧಿಸಿ.
ಫೀಚರ್ ಕ್ವೆರಿ ಬಳಸುವ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:
.parent {
/* ಎಲ್ಲಾ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಮೂಲ ಸ್ಟೈಲಿಂಗ್ */
border: 1px solid black;
}
@supports selector(:has(img)) {
.parent:has(img) {
/* :has() ಬೆಂಬಲಿಸುವ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ವರ್ಧಿತ ಸ್ಟೈಲಿಂಗ್ */
border: 3px solid blue;
}
}
ಈ ಕೋಡ್ ಎಲ್ಲಾ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ .parent ಎಲಿಮೆಂಟ್‌ಗೆ ಕಪ್ಪು ಬಾರ್ಡರ್ ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ. :has() ಅನ್ನು ಬೆಂಬಲಿಸುವ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ, .parent ಎಲಿಮೆಂಟ್ ಚಿತ್ರವನ್ನು ಹೊಂದಿದ್ದರೆ ಅದು ನೀಲಿ ಬಾರ್ಡರ್ ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ.
ಕಾರ್ಯಕ್ಷಮತೆಯ ಪರಿಗಣನೆಗಳು
:has() ಗಮನಾರ್ಹ ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತದೆಯಾದರೂ, ವಿಶೇಷವಾಗಿ ವ್ಯಾಪಕವಾಗಿ ಅಥವಾ ಸಂಕೀರ್ಣ ಸೆಲೆಕ್ಟರ್‌ಗಳೊಂದಿಗೆ ಬಳಸಿದಾಗ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಅದರ ಸಂಭಾವ್ಯ ಪರಿಣಾಮವನ್ನು ಪರಿಗಣಿಸುವುದು ಅತ್ಯಗತ್ಯ. ಬ್ರೌಸರ್‌ಗಳು ಪುಟದ ಪ್ರತಿಯೊಂದು ಎಲಿಮೆಂಟ್‌ಗೂ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಮೌಲ್ಯಮಾಪನ ಮಾಡಬೇಕಾಗುತ್ತದೆ, ಇದು ಗಣನಾತ್ಮಕವಾಗಿ ದುಬಾರಿಯಾಗಬಹುದು.
:has() ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸಲು ಕೆಲವು ಸಲಹೆಗಳು ಇಲ್ಲಿವೆ:
- ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಸರಳವಾಗಿಡಿ:
:has()ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್ ಒಳಗೆ ಅತಿಯಾದ ಸಂಕೀರ್ಣ ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಬಳಸುವುದನ್ನು ತಪ್ಪಿಸಿ. - ವ್ಯಾಪ್ತಿಯನ್ನು ಸೀಮಿತಗೊಳಿಸಿ:
:has()ಅನ್ನು ಜಾಗತಿಕವಾಗಿ ಅನ್ವಯಿಸುವ ಬದಲು ನಿರ್ದಿಷ್ಟ ಎಲಿಮೆಂಟ್‌ಗಳು ಅಥವಾ ಕಂಟೇನರ್‌ಗಳಿಗೆ ಅನ್ವಯಿಸಿ. - ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪರೀಕ್ಷಿಸಿ: ನಿಮ್ಮ CSS ನಿಯಮಗಳ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು ಮತ್ತು ಸಂಭಾವ್ಯ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸಲು ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಪರಿಕರಗಳನ್ನು ಬಳಸಿ.
ತಪ್ಪಿಸಬೇಕಾದ ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳು
:has() ಸೆಲೆಕ್ಟರ್‌ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ, ಅನಿರೀಕ್ಷಿತ ಫಲಿತಾಂಶಗಳಿಗೆ ಕಾರಣವಾಗುವ ತಪ್ಪುಗಳನ್ನು ಮಾಡುವುದು ಸುಲಭ. ತಪ್ಪಿಸಬೇಕಾದ ಕೆಲವು ಸಾಮಾನ್ಯ ಅಪಾಯಗಳು ಇಲ್ಲಿವೆ:
- ಸ್ಪೆಸಿಫಿಸಿಟಿ ಸಮಸ್ಯೆಗಳು: ನಿಮ್ಮ
:has()ನಿಯಮಗಳು ಇತರ CSS ನಿಯಮಗಳನ್ನು ತಳ್ಳಿಹಾಕಲು ಸಾಕಷ್ಟು ಸ್ಪೆಸಿಫಿಸಿಟಿ ಹೊಂದಿದೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಯಾವಾಗಲೂ ಮಾಡುವಂತೆ ಅದೇ ಸ್ಪೆಸಿಫಿಸಿಟಿ ದೋಷನಿವಾರಣೆ ಹಂತಗಳನ್ನು ಬಳಸಿ. - ತಪ್ಪಾದ ನೆಸ್ಟಿಂಗ್:
:has()ಸೆಲೆಕ್ಟರ್ ಸರಿಯಾದ ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಟಾರ್ಗೆಟ್ ಮಾಡುತ್ತಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಮ್ಮ ಎಲಿಮೆಂಟ್‌ಗಳ ನೆಸ್ಟಿಂಗ್ ಅನ್ನು ಎರಡು ಬಾರಿ ಪರಿಶೀಲಿಸಿ. - ಅತಿಯಾದ ಸಂಕೀರ್ಣ ಸೆಲೆಕ್ಟರ್‌ಗಳು:
:has()ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್ ಒಳಗೆ ಅತಿಯಾದ ಸಂಕೀರ್ಣ ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಬಳಸುವುದನ್ನು ತಪ್ಪಿಸಿ, ಏಕೆಂದರೆ ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು. - ತಕ್ಷಣದ ಮಕ್ಕಳನ್ನು ಊಹಿಸುವುದು: ನೆನಪಿಡಿ,
:has()*ಯಾವುದೇ* ವಂಶಸ್ಥರನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ, ಕೇವಲ ತಕ್ಷಣದ ಮಕ್ಕಳನ್ನಲ್ಲ. ನೀವು ಕೇವಲ ತಕ್ಷಣದ ಮಕ್ಕಳನ್ನು ಟಾರ್ಗೆಟ್ ಮಾಡಬೇಕಾದರೆ ಡೈರೆಕ್ಟ್ ಚೈಲ್ಡ್ ಕಾಂಬಿನೇಟರ್ (>) ಬಳಸಿ (ಉದಾ.,div:has(> img)).
:has() ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು
:has() ಸೆಲೆಕ್ಟರ್‌ನ ಪ್ರಯೋಜನಗಳನ್ನು ಗರಿಷ್ಠಗೊಳಿಸಲು ಮತ್ತು ಸಂಭಾವ್ಯ ಸಮಸ್ಯೆಗಳನ್ನು ತಪ್ಪಿಸಲು, ಈ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸಿ:
- ಅದನ್ನು ನ್ಯಾಯಯುತವಾಗಿ ಬಳಸಿ: ಇತರ CSS ತಂತ್ರಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪರಿಹಾರಗಳಿಗಿಂತ ಸ್ಪಷ್ಟ ಪ್ರಯೋಜನವನ್ನು ನೀಡಿದಾಗ ಮಾತ್ರ
:has()ಬಳಸಿ. - ಅದನ್ನು ಸರಳವಾಗಿಡಿ: ಸಂಕೀರ್ಣ, ಗೊಂದಲಮಯ ಸೆಲೆಕ್ಟರ್‌ಗಳಿಗಿಂತ ಸರಳ, ಓದಬಲ್ಲ ಸೆಲೆಕ್ಟರ್‌ಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡಿ.
- ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ: ನಿಮ್ಮ CSS ನಿಯಮಗಳು ನಿರೀಕ್ಷೆಯಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ವಿಭಿನ್ನ ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಸಾಧನಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ.
- ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ದಾಖಲಿಸಿ: ನಿಮ್ಮ
:has()ನಿಯಮಗಳ ಉದ್ದೇಶ ಮತ್ತು ಕಾರ್ಯವನ್ನು ವಿವರಿಸಲು ನಿಮ್ಮ CSS ಕೋಡ್‌ಗೆ ಕಾಮೆಂಟ್‌ಗಳನ್ನು ಸೇರಿಸಿ. - ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು ಪರಿಗಣಿಸಿ: ನಿಮ್ಮ
:has()ಬಳಕೆಯು ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಉದಾಹರಣೆಗೆ, ಪ್ರಮುಖ ಮಾಹಿತಿಯನ್ನು ತಿಳಿಸಲು:has()ನಿಂದ ಪ್ರಚೋದಿಸಲ್ಪಟ್ಟ ಸ್ಟೈಲಿಂಗ್ ಬದಲಾವಣೆಗಳ ಮೇಲೆ ಮಾತ್ರ ಅವಲಂಬಿಸಬೇಡಿ; ವಿಕಲಾಂಗ ಬಳಕೆದಾರರಿಗಾಗಿ ARIA ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಪರ್ಯಾಯ ಕಾರ್ಯವಿಧಾನಗಳನ್ನು ಬಳಸಿ.
ನೈಜ-ಪ್ರಪಂಚದ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಬಳಕೆಯ ಪ್ರಕರಣಗಳು
ಸಾಮಾನ್ಯ ವಿನ್ಯಾಸ ಸವಾಲುಗಳನ್ನು ಪರಿಹರಿಸಲು :has() ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದರ ಕೆಲವು ನೈಜ-ಪ್ರಪಂಚದ ಉದಾಹರಣೆಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ.
ಉದಾಹರಣೆ 8: ರೆಸ್ಪಾನ್ಸಿವ್ ನ್ಯಾವಿಗೇಷನ್ ಮೆನುಗಳನ್ನು ರಚಿಸುವುದು
ನಿರ್ದಿಷ್ಟ ಮೆನು ಐಟಂಗಳ ಉಪಸ್ಥಿತಿಯ ಆಧಾರದ ಮೇಲೆ ವಿಭಿನ್ನ ಪರದೆಯ ಗಾತ್ರಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ರೆಸ್ಪಾನ್ಸಿವ್ ನ್ಯಾವಿಗೇಷನ್ ಮೆನುಗಳನ್ನು ರಚಿಸಲು ನೀವು :has() ಅನ್ನು ಬಳಸಬಹುದು.
ಬಳಕೆದಾರರು ಲಾಗ್ ಇನ್ ಆಗಿದ್ದಾರೆಯೇ ಅಥವಾ ಇಲ್ಲವೇ ಎಂಬುದನ್ನು ಅವಲಂಬಿಸಿ ವಿಭಿನ್ನ ನ್ಯಾವಿಗೇಷನ್ ಮೆನುವನ್ನು ಪ್ರದರ್ಶಿಸಲು ನೀವು ಬಯಸುವ ಸನ್ನಿವೇಶವನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಅವರು ಲಾಗ್ ಇನ್ ಆಗಿದ್ದರೆ ನೀವು ಪ್ರೊಫೈಲ್ ಮತ್ತು ಲಾಗ್‌ಔಟ್ ಕ್ರಿಯೆಗಳನ್ನು ತೋರಿಸಬಹುದು, ಇಲ್ಲದಿದ್ದರೆ ನೀವು ಲಾಗಿನ್/ನೋಂದಣಿ ತೋರಿಸಬಹುದು.
nav:has(.user-profile) {
/* ಲಾಗ್-ಇನ್ ಆಗಿರುವ ಬಳಕೆದಾರರಿಗೆ ಸ್ಟೈಲ್‌ಗಳು */
}
nav:not(:has(.user-profile)) {
/* ಲಾಗ್-ಔಟ್ ಆಗಿರುವ ಬಳಕೆದಾರರಿಗೆ ಸ್ಟೈಲ್‌ಗಳು */
}
ಉದಾಹರಣೆ 9: ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಸ್ಟೈಲ್ ಮಾಡುವುದು
:has() ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಅವುಗಳ ವಿಷಯದ ಆಧಾರದ ಮೇಲೆ ಸ್ಟೈಲ್ ಮಾಡಲು ಬಳಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ಕಾರ್ಡ್ ಚಿತ್ರವನ್ನು ಹೊಂದಿದ್ದರೆ ಮಾತ್ರ ನೀವು ಅದಕ್ಕೆ ನೆರಳು ಸೇರಿಸಬಹುದು.
.card:has(img) {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
ಉದಾಹರಣೆ 10: ಡೈನಾಮಿಕ್ ಥೀಮ್‌ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದು
ಬಳಕೆದಾರರ ಆದ್ಯತೆಗಳು ಅಥವಾ ಸಿಸ್ಟಮ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳ ಆಧಾರದ ಮೇಲೆ ಡೈನಾಮಿಕ್ ಥೀಮ್‌ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ನೀವು :has() ಅನ್ನು ಬಳಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ಬಳಕೆದಾರರು ಡಾರ್ಕ್ ಮೋಡ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿದ್ದಾರೆಯೇ ಎಂಬುದನ್ನು ಆಧರಿಸಿ ನೀವು ಪುಟದ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸಬಹುದು.
body:has(.dark-mode) {
background-color: #333;
color: #fff;
}
ಈ ಉದಾಹರಣೆಗಳು :has() ಸೆಲೆಕ್ಟರ್‌ನ ಬಹುಮುಖತೆಯನ್ನು ಮತ್ತು ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ವಿನ್ಯಾಸ ಸವಾಲುಗಳನ್ನು ಪರಿಹರಿಸುವ ಅದರ ಸಾಮರ್ಥ್ಯವನ್ನು ವಿವರಿಸುತ್ತವೆ.
CSS ನ ಭವಿಷ್ಯ: ಮುಂದೆ ಏನು?
:has() ಸೆಲೆಕ್ಟರ್‌ನ ಪರಿಚಯವು CSS ನ ವಿಕಾಸದಲ್ಲಿ ಒಂದು ಮಹತ್ವದ ಹೆಜ್ಜೆಯನ್ನು ಗುರುತಿಸುತ್ತದೆ. ಇದು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೇಲೆ ಕಡಿಮೆ ಅವಲಂಬನೆಯೊಂದಿಗೆ ಹೆಚ್ಚು ಡೈನಾಮಿಕ್, ರೆಸ್ಪಾನ್ಸಿವ್ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಅಧಿಕಾರ ನೀಡುತ್ತದೆ. :has() ಗಾಗಿ ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಬೆಳೆಯುತ್ತಾ ಹೋದಂತೆ, ಈ ಶಕ್ತಿಯುತ ಸೆಲೆಕ್ಟರ್‌ನ ಇನ್ನಷ್ಟು ನವೀನ ಮತ್ತು ಸೃಜನಾತ್ಮಕ ಉಪಯೋಗಗಳನ್ನು ನಾವು ನಿರೀಕ್ಷಿಸಬಹುದು.
ಮುಂದೆ ನೋಡಿದರೆ, CSS ವರ್ಕಿಂಗ್ ಗ್ರೂಪ್ CSS ನ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಮತ್ತಷ್ಟು ವಿಸ್ತರಿಸುವ ಇತರ ಅತ್ಯಾಕರ್ಷಕ ವೈಶಿಷ್ಟ್ಯಗಳು ಮತ್ತು ವರ್ಧನೆಗಳನ್ನು ಅನ್ವೇಷಿಸುತ್ತಿದೆ. ಇವುಗಳಲ್ಲಿ ಸೇರಿವೆ:
- ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು: ವ್ಯೂಪೋರ್ಟ್‌ನ ಬದಲು ತಮ್ಮ ಕಂಟೇನರ್‌ನ ಗಾತ್ರದ ಆಧಾರದ ಮೇಲೆ ತಮ್ಮ ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಲು ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ಅವಕಾಶ ನೀಡುವುದು.
- ಕ್ಯಾಸ್ಕೇಡ್ ಲೇಯರ್‌ಗಳು: ಕ್ಯಾಸ್ಕೇಡ್ ಮತ್ತು CSS ನಿಯಮಗಳ ಸ್ಪೆಸಿಫಿಸಿಟಿಯ ಮೇಲೆ ಹೆಚ್ಚಿನ ನಿಯಂತ್ರಣವನ್ನು ಒದಗಿಸುವುದು.
- ಹೆಚ್ಚು ಸುಧಾರಿತ ಸೆಲೆಕ್ಟರ್‌ಗಳು: ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಅವುಗಳ ಗುಣಲಕ್ಷಣಗಳು, ವಿಷಯ ಮತ್ತು ಡಾಕ್ಯುಮೆಂಟ್ ಟ್ರೀಯಲ್ಲಿನ ಸ್ಥಾನದ ಆಧಾರದ ಮೇಲೆ ಟಾರ್ಗೆಟ್ ಮಾಡಬಲ್ಲ ಹೊಸ ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಪರಿಚಯಿಸುವುದು.
ಇತ್ತೀಚಿನ CSS ಬೆಳವಣಿಗೆಗಳೊಂದಿಗೆ ನವೀಕೃತವಾಗಿರುವ ಮೂಲಕ ಮತ್ತು :has() ನಂತಹ ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ಡೆವಲಪರ್‌ಗಳು CSS ನ ಸಂಪೂರ್ಣ ಸಾಮರ್ಥ್ಯವನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಬಹುದು ಮತ್ತು ನಿಜವಾಗಿಯೂ ಅಸಾಧಾರಣ ವೆಬ್ ಅನುಭವಗಳನ್ನು ರಚಿಸಬಹುದು.
ತೀರ್ಮಾನ
:has() ಸೆಲೆಕ್ಟರ್ CSS ಟೂಲ್‌ಬಾಕ್ಸ್‌ಗೆ ಒಂದು ಶಕ್ತಿಯುತ ಸೇರ್ಪಡೆಯಾಗಿದೆ, ಇದು ಪೇರೆಂಟ್ ಸೆಲೆಕ್ಷನ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಡೈನಾಮಿಕ್ ಮತ್ತು ರೆಸ್ಪಾನ್ಸಿವ್ ಸ್ಟೈಲಿಂಗ್‌ಗೆ ಹೊಸ ಸಾಧ್ಯತೆಗಳನ್ನು ತೆರೆಯುತ್ತದೆ. ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ಪರಿಣಾಮಗಳನ್ನು ಪರಿಗಣಿಸುವುದು ನಿರ್ಣಾಯಕವಾಗಿದ್ದರೂ, ಸ್ವಚ್ಛ, ಹೆಚ್ಚು ನಿರ್ವಹಿಸಬಲ್ಲ ಮತ್ತು ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯ CSS ಕೋಡ್‌ಗಾಗಿ :has() ಬಳಸುವ ಪ್ರಯೋಜನಗಳು ನಿರಾಕರಿಸಲಾಗದು. ಈ ಗೇಮ್-ಚೇಂಜಿಂಗ್ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು ಇಂದು ನಿಮ್ಮ CSS ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ಕ್ರಾಂತಿಗೊಳಿಸಿ!
ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು ಪರಿಗಣಿಸಲು ಮತ್ತು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಫಾಲ್‌ಬ್ಯಾಕ್ ಕಾರ್ಯವಿಧಾನಗಳನ್ನು ಒದಗಿಸಲು ಮರೆಯದಿರಿ. ಈ ಮಾರ್ಗದರ್ಶಿಯಲ್ಲಿ ವಿವರಿಸಿರುವ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ, ನೀವು :has() ಸೆಲೆಕ್ಟರ್‌ನ ಸಂಪೂರ್ಣ ಸಾಮರ್ಥ್ಯವನ್ನು ಬಳಸಿಕೊಳ್ಳಬಹುದು ಮತ್ತು ಪ್ರಪಂಚದಾದ್ಯಂತದ ಬಳಕೆದಾರರಿಗೆ ನಿಜವಾಗಿಯೂ ಅಸಾಧಾರಣ ವೆಬ್ ಅನುಭವಗಳನ್ನು ರಚಿಸಬಹುದು.